JavaScript Ixtiyoriy Zanjiri: Xususiyatlarga Xavfsiz va Elegant Murojaat

JavaScript-da chuqur joylashgan obyekt xususiyatlarining murakkab tarmog‘ida harakatlanish ko‘pincha minalangan maydondan o‘tishdek tuyulishi mumkin. Bitta yetishmayotgan xususiyat dahshatli "Cannot read property 'x' of undefined" xatoligiga sabab bo'lib, ilovangizni to'satdan to'xtatib qo'yishi mumkin. Har bir xususiyatga murojaat qilishdan oldin null yoki undefined qiymatlarni himoya maqsadida tekshirishning an'anaviy usullari kodni uzun va tushunarsiz qilib qo'yishi mumkin. Yaxshiyamki, JavaScript yanada nafis va ixcham yechimni taklif etadi: ixtiyoriy zanjir (optional chaining).

Ixtiyoriy Zanjir nima?

?. operatori bilan belgilanadigan ixtiyoriy zanjir, xatolikka olib kelmasdan, ehtimol null yoki undefined bo'lishi mumkin bo'lgan obyekt xususiyatlariga murojaat qilish usulini ta'minlaydi. Zanjirda nullish (null yoki undefined) qiymatga duch kelganda xatolik chiqarish o'rniga, u shunchaki undefined qiymatini qaytaradi. Bu sizga chuqur joylashgan xususiyatlarga xavfsiz murojaat qilish va potentsial yetishmayotgan qiymatlarni osonlik bilan boshqarish imkonini beradi.

Buni obyektingiz tuzilmalari uchun xavfsiz navigator deb o'ylang. U sizga xususiyatlar bo'ylab "zanjir" hosil qilishga imkon beradi va agar biror nuqtada xususiyat yetishmayotgan bo'lsa (null yoki undefined), zanjir qisqa tutashadi va xatolikka olib kelmasdan undefined qaytaradi.

U qanday ishlaydi?

?. operatori xususiyat nomidan keyin qo'yiladi. Agar operatorning chap tomonidagi xususiyatning qiymati null yoki undefined bo'lsa, ifoda darhol undefined deb baholanadi. Aks holda, xususiyatga murojaat qilish odatdagidek davom etadi.

Ushbu misolni ko'rib chiqing:

            const user = {
  profile: {
    address: {
      city: "London"
    }
  }
};

// Ixtiyoriy zanjirsiz, agar user.profile yoki user.profile.address aniqlanmagan bo'lsa, bu xatolikka olib kelishi mumkin
const city = user.profile.address.city; // London

// Ixtiyoriy zanjir yordamida, profile yoki address mavjud bo'lmasa ham, shaharga xavfsiz murojaat qila olamiz
const citySafe = user?.profile?.address?.city; // London

const userWithoutAddress = {
  profile: {},
};

const citySafeUndefined = userWithoutAddress?.profile?.address?.city; // undefined (xatoliksiz)

            

              
                Copy
              
            
          

Birinchi misolda, ixtiyoriy zanjir bilan ham, usiz ham, biz "London" qiymatini olamiz, chunki barcha xususiyatlar mavjud.

Ikkinchi misolda, userWithoutAddress.profile mavjud, lekin userWithoutAddress.profile.address mavjud emas. Ixtiyoriy zanjirsiz userWithoutAddress.profile.address.city ga murojaat qilish xatolikka olib keladi. Ixtiyoriy zanjir bilan biz xatoliksiz undefined qiymatini olamiz.

Ixtiyoriy Zanjirdan Foydalanishning Afzalliklari

• Kodning O‘qilishi Yaxshilanadi: Keraksiz null tekshiruvlariga bo'lgan ehtiyojni yo'q qiladi, kodingizni toza va tushunarliroq qiladi.
• Ortiqcha Kod Kamayadi: Murakkab xususiyatlarga murojaat qilish mantiqini soddalashtiradi va yozishingiz kerak bo'lgan kod miqdorini kamaytiradi.
• Xatoliklarning Oldini Olish Kuchayadi: null yoki undefined qiymatlarning xususiyatlariga murojaat qilish natijasida kelib chiqadigan kutilmagan xatoliklarning oldini oladi.
• Ilovalar Mustahkamroq Bo'ladi: Ma'lumotlardagi nomuvofiqliklar va kutilmagan ma'lumotlar tuzilmalariga nisbatan ilovangizni chidamliroq qiladi.

Amaliy Misollar va Qo'llash Holatlari

1. API Ma'lumotlariga Murojaat Qilish

API'dan ma'lumotlarni olib kelayotganda, siz ko'pincha ma'lumotlar tuzilmasini to'liq nazorat qila olmaysiz. Ba'zi maydonlar yetishmasligi yoki null qiymatlarga ega bo'lishi mumkin. Ixtiyoriy zanjir bu kabi holatlarni osonlik bilan boshqarishda bebaho hisoblanadi.

            async function fetchData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  // 'email' xususiyati mavjud bo'lmasa ham, foydalanuvchining email manziliga xavfsiz murojaat qilish
  const email = data?.profile?.email;
  console.log("Email:", email || "Email mavjud emas"); // Standart qiymat berish uchun nullish coalescing operatoridan foydalaning

  //Foydalanuvchining manzilidagi shaharga xavfsiz murojaat qilish
  const city = data?.address?.city;
  console.log("City: ", city || "Shahar mavjud emas");


}

fetchData(123); // Misol tariqasida foydalanish

            

              
                Copy
              
            
          

2. Foydalanuvchi Sozlamalari bilan Ishlash

Foydalanuvchi sozlamalari ko'pincha ichma-ich joylashgan obyektlarda saqlanadi. Ixtiyoriy zanjir, ba'zi sozlamalar aniqlanmagan bo'lsa ham, bu sozlamalarga murojaat qilishni soddalashtirishi mumkin.

            const userPreferences = {
  theme: {
    color: "dark",
  },
};

// Foydalanuvchining shrift o'lchamiga xavfsiz murojaat qilish va agar u o'rnatilmagan bo'lsa, standart qiymatni taqdim etish
const fontSize = userPreferences?.font?.size || 16;
console.log("Shrift o'lchami:", fontSize); // Natija: 16 (standart qiymat)

const color = userPreferences?.theme?.color || "light";
console.log("Rang mavzusi:", color); // Natija: dark

            

              
                Copy
              
            
          

3. Hodisa Tinglovchilarini Boshqarish

Hodisa tinglovchilari (event listeners) bilan ishlaganda, sizga hodisa obyektining xususiyatlariga murojaat qilish kerak bo'lishi mumkin. Ixtiyoriy zanjir hodisa obyekti yoki uning xususiyatlari aniqlanmagan bo'lsa, xatoliklarning oldini olishga yordam beradi.

            document.getElementById('myButton').addEventListener('click', function(event) {
  // Nishondagi elementning ID'siga xavfsiz murojaat qilish
  const targetId = event?.target?.id;
  console.log("Nishon ID'si:", targetId);
});

            

              
                Copy
              
            
          

4. Xalqarolashtirish (i18n)

Ko'p tilli ilovalarda siz ko'pincha foydalanuvchining til sozlamasiga asoslanib, ichma-ich joylashgan obyektdan tarjima qilingan satrlarga murojaat qilishingiz kerak bo'ladi. Ixtiyoriy zanjir bu jarayonni soddalashtiradi.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour",
    //farewell: "Au Revoir" - namoyish uchun olib tashlandi
  }
};

const locale = "fr";

// Tarjima qilingan salomlashuvga xavfsiz murojaat qilish
const greeting = translations?.[locale]?.greeting || "Hello";
console.log("Salomlashuv:", greeting); // Natija: Bonjour

//Tarjima qilingan xayrlashuvga xavfsiz murojaat qilish
const farewell = translations?.[locale]?.farewell || "Goodbye";
console.log("Xayrlashuv:", farewell); //Natija: Goodbye (standart ingliz tiliga qaytadi)

            

              
                Copy
              
            
          

Funksiya Chaqiruvlari bilan Ixtiyoriy Zanjir

Ixtiyoriy zanjir mavjud bo'lmasligi mumkin bo'lgan funksiyalarni xavfsiz chaqirish uchun ham ishlatilishi mumkin. Buning uchun ?.() sintaksisidan foydalaning.

            const myObject = {
  myMethod: function() {
    console.log("Metod chaqirildi!");
  }
};

// Agar metod mavjud bo'lsa, uni xavfsiz chaqirish
myObject?.myMethod?.(); // Natija: Metod chaqirildi!

const myObject2 = {};

//Metodni xavfsiz chaqirish, lekin u mavjud emas
myObject2?.myMethod?.(); // Xatolik yo'q, hech narsa sodir bo'lmaydi

            

              
                Copy
              
            
          

Massivlarga Murojaat qilish bilan Ixtiyoriy Zanjir

Ixtiyoriy zanjir massivlarga murojaat qilishda ham ?.[index] sintaksisi yordamida ishlatilishi mumkin. Bu bo'sh yoki to'liq to'ldirilmagan bo'lishi mumkin bo'lgan massivlar bilan ishlashda foydalidir.

            const myArray = ["apple", "banana", "cherry"];

//Massiv elementiga xavfsiz murojaat qilish
const firstElement = myArray?.[0]; // "apple"

const myArray2 = [];

//Massiv elementiga xavfsiz murojaat qilish, undefined bo'ladi.
const firstElement2 = myArray2?.[0]; // undefined

const secondElement = myArray?.[10]; // undefined (xatoliksiz)

            

              
                Copy
              
            
          

Ixtiyoriy Zanjirni Nullish Coalescing bilan Birlashtirish

Ixtiyoriy zanjir ko'pincha nullish coalescing operatori (??) bilan birgalikda ishlaydi. Nullish coalescing operatori operatorning chap tomoni null yoki undefined bo'lganda standart qiymatni taqdim etadi. Bu xususiyat yetishmayotgan hollarda zaxira qiymatlarni taqdim etish imkonini beradi.

            const user = {};

// Foydalanuvchi ismiga xavfsiz murojaat qilish va agar u o'rnatilmagan bo'lsa, standart qiymatni taqdim etish
const name = user?.profile?.name ?? "Noma'lum foydalanuvchi";
console.log("Ism:", name); // Natija: Noma'lum foydalanuvchi

            

              
                Copy
              
            
          

Ushbu misolda, agar user.profile yoki user.profile.name null yoki undefined bo'lsa, name o'zgaruvchisiga "Noma'lum foydalanuvchi" qiymati beriladi.

Brauzerlar bilan Muvofiqligi

Ixtiyoriy zanjir JavaScript-ning nisbatan yangi xususiyati (ECMAScript 2020 da kiritilgan). U barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi. Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, kodingizni JavaScript-ning mos keluvchi versiyasiga o'tkazish uchun Babel kabi transpilyatordan foydalanishingiz kerak bo'lishi mumkin.

Cheklovlar

• Ixtiyoriy zanjir faqat xususiyatlarga murojaat qilish uchun ishlatilishi mumkin, qiymatlarni belgilash uchun emas. Uni topshiriqning chap tomonida ishlata olmaysiz.
• Haddan tashqari ko'p foydalanish potentsial xatoliklarni yashirishi mumkin. Ish vaqtidagi istisnolarning oldini olish yaxshi bo'lsa-da, nima uchun xususiyat yetishmayotganini tushunish hali ham muhim. Asosiy ma'lumotlar muammolarini aniqlash va hal qilishga yordam berish uchun log yozish yoki boshqa tuzatish mexanizmlarini qo'shishni o'ylab ko'ring.

Eng Yaxshi Amaliyotlar

• Xususiyat mavjudligiga ishonchingiz komil bo'lmaganda foydalaning: Ixtiyoriy zanjir xususiyatlar yetishmayotgan yoki null qiymatlarga ega bo'lishi mumkin bo'lgan ma'lumotlar manbalari bilan ishlashda eng foydalidir.
• Uni nullish coalescing bilan birlashtiring: Xususiyat yetishmayotganda standart qiymatlarni taqdim etish uchun nullish coalescing operatoridan (??) foydalaning.
• Haddan tashqari ko'p foydalanishdan saqlaning: Potentsial xatoliklarni yashirmaslik uchun ixtiyoriy zanjirdan beg'araz foydalanmang. Uni faqat zarur bo'lganda ishlating.
• Kodingizni hujjatlashtiring: Nima uchun ixtiyoriy zanjirdan foydalanayotganingizni va xususiyat yetishmayotganda kutilayotgan xatti-harakat qanday bo'lishini aniq hujjatlashtiring.

Xulosa

JavaScript-ning ixtiyoriy zanjir operatori toza, xavfsiz va mustahkamroq kod yozish uchun kuchli vositadir. Potentsial yetishmayotgan xususiyatlarga murojaat qilishning ixcham usulini taqdim etish orqali u xatoliklarning oldini olishga, ortiqcha kodni kamaytirishga va kodning o'qilishini yaxshilashga yordam beradi. Uning qanday ishlashini tushunib, eng yaxshi amaliyotlarga rioya qilgan holda, siz yanada chidamli va saqlanishi oson JavaScript ilovalarini yaratish uchun ixtiyoriy zanjirdan foydalanishingiz mumkin.

Loyihalaringizda ixtiyoriy zanjirni qo'llang va xususiyatlarga xavfsiz va elegant murojaat qilishning afzalliklaridan bahramand bo'ling. Bu sizning kodingizni o'qilishi oson, kamroq xatoliklarga moyil va natijada saqlanishi osonroq qiladi. Omadli kodlash!